<template>
	<view class="search">
		<view class="search-box">
			<!-- uni提供的搜索框 -->
			<uni-search-bar @input="input" :redius="100" cancelButton="none"></uni-search-bar>
		</view>

		<!-- 搜索内容 -->
		<view class="tag-search" v-if="searchResults.length !== 0" v-for="(item,index) in searchResults"
			:key="item.goods_id">
			<view class="tag-search-view" @click="gotoDetail(item.goods_id)">

				<view class="tag-search-view-text">{{item.goods_name}} </view>
				<uni-icons class="tag-search-icon" type="right" size="20"></uni-icons>
			</view>
		</view>


		<view class="tag-view" v-if="searchResults.length === 0">
			<!-- 搜索记录 -->
			<view class="view-delete">
				<view>搜索记录</view>
				<view>
					<uni-icons class="delete-icon" @click="getdelete()" type="trash-filled" size="20"></uni-icons>
				</view>
			</view>
			<!-- 搜索记录内容 -->
			<view class="view-search" v-for="(item,index) in searchRecords" :key="index">
				<view class="view-itme">
					<view class="view-itme-msg" @click="gotoList(item)">{{item}}</view>
					<uni-icons class="delete-view-icon" @click="onlydelete(index)" type="close" size="20"></uni-icons>
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 延时器
				timer: null,
				kw: '', //搜索关键字
				searchResults: [], //搜索信息
				searchRecords: [], //搜索记录
				// 搜索关键字的历史记录

			};
		},


		onLoad() {
			// 去除缓存
			this.searchRecords = JSON.parse(uni.getStorageSync('kw') || '[]')
		},
		methods: {
			input(e) {
				// 清除延迟期
				clearTimeout(this.timer)
				// 重新启动延时器，并把timer赋值给this.timer---节流
				this.timer = setTimeout(() => {
					this.kw = e
					// console.log(this.kw);
					if (this.kw !== '') {
						this.searchRecords.forEach(item => {
								if (item == this.kw) {
									this.searchRecords.splice(this.searchRecords.indexOf(item), 1)
								}
							}),
							this.searchRecords.unshift(this.kw)
					}
					this.getSearchList()
				}, 1000)
			},

			// 删除全部
			getdelete() {
				// 改变this的执行
				let _this = this
				uni.showModal({
					title: '是否删除',
					success(sm) {
						if (sm.confirm) {
							_this.searchRecords = [],
								uni.removeStorageSync('kw')
						} else {
							console.log('取消删除');
						}
					}
				})


			},

			// 只删除一个
			onlydelete(index) {
				let _this = this
				uni.showModal({
					title: '是否删除',
					success: function(idex) {
						if (idex.confirm) {
							_this.searchRecords.findIndex((item, id) => {
								if (id === index) {
									_this.searchRecords.splice(id, 1)
									uni.removeStorageSync('kw')
								}
							})

						} else {
							console.log('取消删除');
						}
					}
				})

			},


			// 根据关键字查找数据
			async getSearchList() {
				//判断关键词是否为空
				if (this.kw === '') {
					this.searchResults = []
					return
				}
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/qsearch', {
					query: this.kw
				})
				if (res.meta.status !== 200) return uni.$showMsg()
				this.searchResults = res.message
				// 保存关键字
				uni.setStorageSync('kw', JSON.stringify(this.searchRecords))
			},

			//点击搜索结果跳转商品详情
			gotoDetail(goods_id) {
				uni.navigateTo({
					url: `/subpkg/goods_detail/goods_detail?goods_id=${goods_id}`
				})
			},


			// 跳转到商品列表
			gotoList(item) {
				uni.navigateTo({
					url: `/subpkg/goods_list/goods_list?query=${item}`
				})
			}

		}

	}
</script>

<style lang="scss">
	.search {

		// 搜索框
		.search-box {
			position: sticky;
			top: 0;
			z-index: 999;
		}

		// 浏览记录
		.view-search {
			display: inline-block;
			margin: 5px 5px;

			.view-itme {
				background-color: #989898;
				border-radius: 3px;
				padding: 5px;
				width: 80px;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;

				.view-itme-msg {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.view-delete {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			line-height: 30px;
			border-bottom: 1px solid #989898;
		}


		// 搜索信息

		.tag-search {
			padding: 5px;

			.tag-search-view {
				border-bottom: 1px solid #989898;
				display: flex;
				justify-content: space-between;
				padding: 3px;

				.tag-search-view-text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap
				}
			}

			.tag-search-icon {
				float: right;
			}
		}
	}
</style>